<script setup lang="tsx">
import { ElDialog } from 'element-plus'
import { Table, TableColumn } from '@/components/Table'

import { useTable } from '@/hooks/web/useTable'
import { ref, reactive, unref } from 'vue'
import { getProportionListApi } from '@/api/user'

//Table
const { tableRegister, tableMethods, tableState } = useTable({
  immediate: false,
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const { data, count } = await getProportionListApi({
      pageNo: unref(currentPage),
      pageSize: unref(pageSize),
      userId: userId.value
    })
    return {
      list: data,
      total: count
    }
  }
})

const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList } = tableMethods

const columns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: '序号',
    type: 'index'
  },
  {
    field: 'amount',
    label: '金额'
  },
  {
    field: 'recordName',
    label: '对应项目名称'
  },
  {
    field: 'billNo',
    label: '流水号'
  },
  {
    field: 'subordinateAmount',
    label: '下级获取的收益'
  },
  {
    field: 'subordinateName',
    label: '下级用户名称'
  },
  {
    field: 'networkId',
    label: '广告平台Id'
  },
  {
    field: 'createTime',
    label: '创建时间'
  }
])
const visible = ref()
const userId = ref()
const openDialog = (row: any) => {
  visible.value = true
  userId.value = row.id
  getList()
}
defineExpose({
  openDialog
})
</script>

<template>
  <ElDialog title="分成记录" v-model="visible">
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="columns"
      :data="dataList"
      row-key="id"
      :loading="loading"
      sortable
      headerAlign="center"
      align="center"
      :pagination="{
        total: total
      }"
      @register="tableRegister"
    />
  </ElDialog>
</template>
